<template>
  <a-tabs class="edit_boxs" v-model:activeKey="activeKey" :tab-position="tabPosition" animated>
    <a-tab-pane key="1" tab="系统设置">
      <!-- 搜索 -->
      <a-form name="customized_form_controls" layout="inline" :model="steditvalues"
       @finish="onFinishedit"
        style="margin: 30px 0; background: #fff" expandFixed="true">
        <div class="form_item">
          <a-form-item name="title" label="系统地址">
            <a-input v-model:value="steditvalues.xtdz" placeholder="请输入系统地址" />
          </a-form-item>
        </div>
        <div class="form_item">
          <a-form-item name="email" label="后台地址">
            <a-input v-model:value="steditvalues.htdz" placeholder="请输入后台地址" />
          </a-form-item>
        </div>
        <div class="form_item">
          <a-form-item name="email" label="系统标题">
            <a-input v-model:value="steditvalues.xtbt" placeholder="请输入系统标题" />
          </a-form-item>
        </div>
        <div class="form_item">
          <a-form-item name="email" label="logo">

            <a-input-group compact>
              <a-input v-model:value="steditvalues.logo" style="width: calc(100% - 200px)" />
              <a-tooltip title="copy git url">
                <a-button @click="() => showDrawers(true)">
                  <svg viewBox="64 64 896 896" focusable="false" data-icon="file-image" width="1em" height="1em"
                    fill="currentColor" aria-hidden="true">
                    <path
                      d="M553.1 509.1l-77.8 99.2-41.1-52.4a8 8 0 00-12.6 0l-99.8 127.2a7.98 7.98 0 006.3 12.9H696c6.7 0 10.4-7.7 6.3-12.9l-136.5-174a8.1 8.1 0 00-12.7 0zM360 442a40 40 0 1080 0 40 40 0 10-80 0zm494.6-153.4L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494z">
                    </path>
                  </svg>
                </a-button>
              </a-tooltip>
            </a-input-group>
          </a-form-item>
        </div>
        <div class="form_item">
          <a-form-item name="email" label="Favicon">
            <a-input-group compact>
              <a-input v-model:value="steditvalues.Favicon" style="width: calc(100% - 200px)" />
              <a-tooltip title="copy git url">
                <a-button @click="() => showDrawers(false)">
                  <svg viewBox="64 64 896 896" focusable="false" data-icon="file-image" width="1em" height="1em"
                    fill="currentColor" aria-hidden="true">
                    <path
                      d="M553.1 509.1l-77.8 99.2-41.1-52.4a8 8 0 00-12.6 0l-99.8 127.2a7.98 7.98 0 006.3 12.9H696c6.7 0 10.4-7.7 6.3-12.9l-136.5-174a8.1 8.1 0 00-12.7 0zM360 442a40 40 0 1080 0 40 40 0 10-80 0zm494.6-153.4L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494z">
                    </path>
                  </svg>
                </a-button>
              </a-tooltip>
            </a-input-group>
          </a-form-item>
        </div>
        <div class="form_item">
          <a-form-item name="email" label="页脚信息">
            <textarea v-model="steditvalues.yjiao" placeholder="请输入系统标题"></textarea>
          </a-form-item>
        </div>
        <a-form-item expandFixed="right">
          <a-button type="primary" html-type="submit">保存</a-button>
        </a-form-item>
      </a-form>
    </a-tab-pane>
    <a-tab-pane key="2" tab="国际化设置">
      <Guojiedit/>
    </a-tab-pane>
    <a-tab-pane key="3" tab="SEO设置">Content of Tab 3</a-tab-pane>
    <a-tab-pane key="4" tab="数据统计">Content of Tab 3</a-tab-pane>
    <a-tab-pane key="5" tab="OSS设置">Content of Tab 3</a-tab-pane>
    <a-tab-pane key="6" tab="SMTP服务">Content of Tab 3</a-tab-pane>
  </a-tabs>
  <a-drawer v-model:visible="visibles" class="custom-class" title="文件选择" placement="right" width="800"
    @after-visible-change="afterVisibleChanges">
    <a-card style="width: 100%">

      <a-form name="customized_form_controls" layout="inline" :model="file_values" @finish="onFinishe"
        style="margin: 30px 0; background: #fff" expandFixed="true">
        <!-- 文件名称输入框 -->
        <a-form-item name="price" label="文件名称">
          <a-input v-model:value="file_values.title" placeholder="请输入标题" />
        </a-form-item>
        <!-- 文件类型输入框 -->
        <a-form-item name="price" label="文件类型">
          <a-input v-model:value="file_values.types" placeholder="请输入标题" />
        </a-form-item>
        <a-form-item expandFixed="right">
          <a-button type="primary" html-type="submit">搜索</a-button>
          <a-button @click="() => toset()">重置</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <br />
    <a-card style="width: 100%">
      <a-upload v-model:file-list="fileList" name="file" :customRequest="setfile" :showUploadList="false"
        @change="handleChange">
        <a-button>
          上传
        </a-button>
      </a-upload>
      <div class="imgs_box">
        <div v-for="(item, ind) in fileLists" :key="ind">
          <!-- <img :src="item.url" alt=""> -->
          <a-image :width="160" :height="75" :src="item.url" />
          <div @click="() => editurl(item.url)">
            <p style="font-weight: bold;">{{ item.originalname }}</p>
          <p style="font-size: 12px;">上传于：{{ item.createAt }}</p>
          </div>
        </div>
      </div>
    </a-card>
    <a-card style="width: 100%">
      <a-pagination v-model:current="current" v-model:page-size="pageSize" :total="totals"
        :page-size-options="pageSizeOptionse" show-size-changer @showSizeChange="onShowSizeChangee"
        @change="pageChagee" />
    </a-card>

  </a-drawer>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue"
import { storeToRefs } from "pinia";
import { useEdits } from "../../store/edits"
import { useFiles } from "../../store/files"

//国际化设置
import Guojiedit from "../../components/Guojiedit.vue"
//引入pinia 
let edits = useEdits();
let { editsList } = storeToRefs(edits);
// //初始化获取页面数据
edits.geteditList()
let fileList = ref([]);
let islogo = true;
//tab切换的下标
let activeKey = ref('1')
//tab切换的方向
const tabPosition = ref('left');
//输入框的初始值
 //系统设置页面
let steditvalues = reactive({
  xtdz: editsList.value.systemUrl || "",
  htdz: editsList.value.adminSystemUrl || "",
  xtbt: editsList.value.systemTitle || "",
  logo: editsList.value.systemLogo || "",
  Favicon: editsList.value.systemFavicon || "",
  yjiao: editsList.value.systemFooterInfo || ""
})


//点击修改系统设置表单数据
const onFinishedit = () => {
  let obj = {};
  obj = {
    adminSystemUrl:steditvalues.htdz,
    systemFavicon:steditvalues.Favicon,
    systemFooterInfo:steditvalues.yjiao,
    systemLogo:steditvalues.logo,
    systemTitle:steditvalues.xtbt,
    systemUrl:steditvalues.xtdz,
  }
  edits.editxtshezhi(obj)
}
const ufiles = useFiles();
let { cover, fileLists, totals } = storeToRefs(ufiles)
//抽屉
const current = ref(1);
const pageSize = ref(8);

const visibles = ref<boolean>(false);

const afterVisibleChanges = (bool: boolean) => {
  console.log('visible', bool);
};
//上传
const handleChange = async (info: any) => {
  ufiles.uploadfile(info.file.originFileObj)

};//自定义上传啊
const setfile = (v: any) => {
  // console.log(v, "set file")
}
const showDrawers = (val: any) => {

  // console.log(val, "val")
  visibles.value = true;
  islogo = val;
  //初始化页面数据
  localStorage.removeItem("searchobj")
};

const editurl = (val: any) => {
  console.log(val, "edit")
  if (islogo) {
    steditvalues.logo = val
  } else {
    steditvalues.Favicon = val
  }
  visibles.value = false;
}

//定义搜索框的初始数据
const file_values = reactive({
  title: "",
  types: ""
});

let file_current = ref(1);
let file_pageSize = ref(8);
const pageSizeOptionse = ref<string[]>(['8', '12', '16', '20', '24']);

let file_flag = false;
//文件数据
let fileitem = {}
//初始化获取数据
ufiles.getsearchfiles({ page: file_current.value, pageSize: file_pageSize.value })
//切换分页条数
const onShowSizeChangee = (currents: number, pageSizes: number) => {
  console.log(currents, pageSizes, "页码，条数");
  file_current.value = 1
  file_pageSize.value = pageSizes;
};
//切换页数
const pageChagee = (page: number, pageSize: number) => {
  file_current.value = page;
  file_flag = false;
  searche()
}
//重置
const toset = () => {
  location.reload()
}



//点击搜索获取表单数据
const onFinishe = () => {
  //点击模糊搜索
  console.log(file_values, "values")
  file_flag = true;
  searche()
}
//封装一个模糊搜索的方法
const searche = () => {
  let obj = {};
  if (file_flag) {
    file_current.value = 1,
      file_pageSize.value = 12
    obj = {
      page: file_current.value,
      pageSize: file_pageSize.value
    }
  } else {
    obj = JSON.parse(localStorage.getItem("searchobj") || "{}")
    obj = {
      ...obj,
      page: file_current.value,
      pageSize: file_pageSize.value
    }
  }
  if (file_values.title != "") {
    obj = { ...obj, originalname: file_values.title }
  }
  if (file_values.types != "") {
    obj = { ...obj, type: file_values.types }
  }

  ufiles.getsearchfiles(obj)
}
</script>

<style lang="scss">
.edit_boxs {
  width: 100vw;
  height: 100vh;
  background: #FFF;
}

.ant-tabs-nav {
  height: 100%;
}

.ant-tabs-content-holder {
  height: 100%;
  width: 80%;

  .ant-tabs-content {
    width: 80%;
    height: 100%;
  }
}

.form_item {
  margin: 10px 0;
  padding: 10px 0;
}
</style>